import { ref, defineComponent } from 'vue';
import { Table, Button } from 'ant-design-vue';
import Modal from './components/addDialog/index.jsx';
import './index.scss';

export default defineComponent({
  name: 'JSX-TaskComponents',
  setup() {
    const prefix = 'JSX-TaskComponents';
    const columns = [
      {
        title: '名字',
        dataIndex: 'name',
        key: 'name',
        customRender: ({ text, record, index }) => {
          return <span style={{ color: 'blue' }}>{text}</span>;
        },
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: '操作',
        dataIndex: 'operation',
        key: 'operation',
        width: 200,
        customRender: ({ text, record }) => {
          return (
            <div>
              <Button type='primary' style={{ marginRight: '10px' }} onClick={() => handleEdit(record)}>
                编辑
              </Button>
              <Button danger onClick={() => handleDelete(record)}>
                删除
              </Button>
            </div>
          );
        },
      },
    ];
    const data = [
      { name: '张三', age: 20 },
      { name: '张三', age: 20 },
      { name: '张三', age: 20 },
      { name: '张三', age: 20 },
      { name: '张三', age: 20 },
      { name: '张三', age: 20 },
    ];

    const handleEdit = (record) => {
      console.log(record);
    };

    const handleDelete = (text) => {
      console.log(text);
    };

    const visible = ref(false);
    const handleAdd = () => {
      visible.value = true;
    };

    const handleCancel = () => {
      visible.value = false;
    };

    return () => (
      <div class={prefix}>
        <h1>Task Components</h1>
        <p>This is a task components.</p>
        <div class='search-box'>
          <Button onClick={() => handleAdd()}>新增</Button>
        </div>
        <div class='table-box'>
          <Table columns={columns} dataSource={data}></Table>
        </div>
        <Modal visible={visible.value} onCancel={handleCancel} />
      </div>
    );
  },
});
